<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="基础配置" name="MainConfig">
      <el-form-item label="是否启用：">
        <el-radio-group v-model="configValue.open">
          <el-radio-button :value="1">启用</el-radio-button>
          <el-radio-button :value="0">关闭</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="强制显示：">
        <el-radio-group v-model="configValue.forceShow">
          <el-radio-button :value="1">开启</el-radio-button>
          <el-radio-button :value="0">关闭</el-radio-button>
        </el-radio-group>
        <span class="tip">配置无效也展示付款方式</span>
      </el-form-item>

      <el-form-item label="订单名称：">
        <el-input v-model="configValue.body" placeholder="支付订单名称"/>
      </el-form-item>

      <el-form-item label="订单详情：">
        <el-input v-model="configValue.detail" placeholder="支付订单详情"/>
      </el-form-item>

      <el-divider border-style="dashed" content-position="left"></el-divider>

      <el-form-item label="最小金额限制：">
        <el-input-number v-model="configValue.showMinAmount" :min="0.01" :precision="2" :step="0.01" controls-position="right"/>
      </el-form-item>

      <el-form-item label="最大金额限制：">
        <el-input-number v-model="configValue.showMaxAmount" :min="configValue.showMinAmount" :precision="2" :step="0.01" controls-position="right"/>
      </el-form-item>

      <el-divider border-style="dashed" content-position="left"></el-divider>

      <el-form-item label="支付名称：">
        <el-input v-model="configValue.channelTitle" placeholder="支付方式名称"/>
      </el-form-item>

      <el-form-item label="支付描述：">
        <el-input v-model="configValue.channelDesc" placeholder="支付方式描述"/>
      </el-form-item>

      <el-form-item label="按钮名称：">
        <el-input v-model="configValue.channelButtonName" placeholder="支付方式按钮名称"/>
      </el-form-item>

      <el-form-item label="支付图标：">
        <el-input v-model="configValue.channelIconUrl" :autosize="{ minRows: 1}" :readonly="readonly" placeholder="请输入或点击下方设置" type="textarea"/>
        <UploadImage v-model="configValue.channelIconUrl" :readonly="readonly" style="margin-top: 6px"/>
      </el-form-item>
    </el-tab-pane>

    <el-tab-pane label="密匙配置" name="PaymentConfig">
      <!-- 支付宝支付配置 -->
      <template v-if="configType == 30">

        <el-form-item label="加签模式：">
          <el-radio-group v-model="configValue.certRequest">
            <el-radio-button :value="1">公匙证书</el-radio-button>
            <el-radio-button :value="0">公匙</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="商户签约PID：">
          <el-input v-model="configValue.pid" placeholder="商户签约拿到的pid，如：2088102123816631"/>
        </el-form-item>

        <el-form-item label="支付宝应用ID：">
          <el-input v-model="configValue.appId" placeholder="支付宝分配给开发者的应用ID"/>
        </el-form-item>

        <el-form-item label="加密公匙：">
          <el-input v-model="configValue.publicKey" :autosize="{ minRows: 2, maxRows: 10}" placeholder="加密的公匙" type="textarea"/>
        </el-form-item>

        <el-form-item label="加密私匙：">
          <el-input v-model="configValue.privateKey" :autosize="{ minRows: 2, maxRows: 10}" placeholder="加密私匙" type="textarea"/>
        </el-form-item>

        <!-- 公匙证书 -->
        <template v-if="configValue.certRequest === 0">
          <el-form-item label="支付宝公匙：">
            <el-input v-model="configValue.aliPayPublicKey" :autosize="{ minRows: 2, maxRows: 10}" placeholder="支付宝公匙 用于异步验证" type="textarea"/>
          </el-form-item>
        </template>

        <!--公匙 -->
        <template v-else-if="configValue.certRequest === 1">
          <el-form-item label="应用公钥证书：">
            <el-input v-model="configValue.appCertPath" placeholder="应用公钥证书路径."/>
            <span class="tip">格式: /文件路径/appCertPublicKey_***.crt</span>
          </el-form-item>

          <el-form-item label="支付宝公钥证书：">
            <el-input v-model="configValue.alipayPublicCertPath" placeholder="支付宝公钥证书文件路径."/>
            <span class="tip">格式: /文件路径/alipayCertPublicKey_RSA2.crt</span>
          </el-form-item>

          <el-form-item label="支付宝CA根证书：">
            <el-input v-model="configValue.alipayRootCertPath" placeholder="支付宝CA根证书文件路径."/>
            <span class="tip">格式: /文件路径/alipayRootCert.crt</span>
          </el-form-item>
        </template>

        <el-form-item label="支付回调地址：">
          <el-input v-model="configValue.notifyUrl" :autosize="{ minRows: 2, maxRows: 4}" placeholder="服务器异步通知页面路径，通知url必须为直接可访问的url，不能携带参数." type="textarea">
          </el-input>
        </el-form-item>

        <el-form-item label="退款回调地址：">
          <el-input v-model="configValue.refundNotifyUrl" :autosize="{ minRows: 2, maxRows: 4}" placeholder="服务器异步通知页面路径，通知url必须为直接可访问的url，不能携带参数." type="textarea">
          </el-input>
        </el-form-item>

        <el-form-item label="支付签名类型：">
          <el-select v-model="configValue.signType" placeholder="请选择支付签名类型">
            <el-option key="RSA2" label="RSA2 签名" value="RSA2"/>
          </el-select>
        </el-form-item>
      </template>

      <!-- 微信支付配置 -->
      <template v-if="configType == 31">

        <el-form-item label="公众账号ID：">
          <el-input v-model="configValue.appId" placeholder="微信分配的公众账号ID（企业号corpId即为此appId）"/>
        </el-form-item>

        <el-form-item label="商户号ID：">
          <el-input v-model="configValue.mchId" placeholder="商户号ID"/>
        </el-form-item>

        <el-form-item label="商户密钥：">
          <el-input v-model="configValue.mchKey" placeholder="商户密钥"/>
        </el-form-item>

        <el-form-item label="支付回调地址：">
          <el-input v-model="configValue.notifyUrl" :autosize="{ minRows: 2, maxRows: 4}" placeholder="微信支付异步回调地址，通知url必须为直接可访问的url，不能携带参数." type="textarea">
          </el-input>
        </el-form-item>

        <el-form-item label="退款回调地址：">
          <el-input v-model="configValue.refundNotifyUrl" :autosize="{ minRows: 2, maxRows: 4}" placeholder="微信支付退款访问后端的地址." type="textarea">
          </el-input>
        </el-form-item>

        <el-form-item label="证书文件路径：">
          <el-input v-model="configValue.keyPath" placeholder="p12证书文件的绝对路径或者以classpath:开头的类路径."/>
        </el-form-item>

        <el-form-item label="支付签名类型：">
          <el-select v-model="configValue.signType" placeholder="请选择支付签名类型">
            <el-option key="MD5" label="MD5 签名" value="MD5"/>
            <el-option key="HmacSHA256" label="HmacSHA256 签名" value="HmacSHA256"/>
          </el-select>
        </el-form-item>

        <el-form-item label="仿真测试环境：">
          <el-switch v-model="configValue.useSandboxEnv"
                     active-color="#13CE66"
                     inactive-color="#FF4949"
                     size="small">
          </el-switch>
          <span class="tip">{{ configValue.useSandboxEnv ? '开启' : '关闭' }} 仿真测试环境</span>
        </el-form-item>
      </template>

      <!-- 汇付宝支付配置 -->
      <template v-if="configType == 32">

        <el-form-item label="调试日志：">
          <el-radio-group v-model="configValue.openDebugLog">
            <el-radio-button :value="0">关闭</el-radio-button>
            <el-radio-button :value="1">开启</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="商户编号：">
          <el-input v-model="configValue.merchId" placeholder="请输入商户编号"/>
        </el-form-item>

        <el-form-item label="子商户编号：">
          <el-input v-model="configValue.subMerchId" placeholder="请输入默认子商户编号"/>
        </el-form-item>

        <el-form-item label="支付MD5密匙：">
          <el-input v-model="configValue.md5Key" placeholder="请输入支付MD5密匙"/>
        </el-form-item>

        <el-form-item label="支付回调地址：">
          <el-input v-model="configValue.notifyUrl" :autosize="{ minRows: 1, maxRows: 4}" placeholder="支付异步回调地址，通知url必须为直接可访问的url，不能携带参数." type="textarea">
          </el-input>
        </el-form-item>

        <el-form-item label="退款MD5密匙：">
          <el-input v-model="configValue.refundMd5Key" placeholder="请输入退款MD5密匙"/>
        </el-form-item>

        <el-form-item label="退款回调地址：">
          <el-input v-model="configValue.refundNotifyUrl" :autosize="{ minRows: 1, maxRows: 4}" placeholder="支付退款访问后端的地址." type="textarea"></el-input>
        </el-form-item>

        <el-divider border-style="dashed" content-position="left">快捷收银台密匙</el-divider>

        <el-form-item label="商户公钥：">
          <el-input v-model="configValue.publicKey" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入商户公钥" type="textarea"/>
        </el-form-item>

        <el-form-item label="商户私钥：">
          <el-input v-model="configValue.privateKey" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入商户私钥" type="textarea"/>
        </el-form-item>

        <el-form-item label="汇付宝公钥：">
          <el-input v-model="configValue.heepayPublicKey" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入汇付宝公钥" type="textarea"/>
        </el-form-item>
      </template>

      <!-- 华微谷支付配置 -->
      <template v-if="configType == 33">

        <el-form-item label="调试日志：">
          <el-radio-group v-model="configValue.openDebugLog">
            <el-radio-button :value="0">关闭</el-radio-button>
            <el-radio-button :value="1">开启</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="商户号：">
          <el-input v-model="configValue.merchantId" placeholder="请输入商户号"/>
        </el-form-item>

        <el-form-item label="商户密匙：">
          <el-input v-model="configValue.merchantKey" placeholder="请输入商户密匙"/>
        </el-form-item>

        <el-form-item label="支付回调地址：">
          <el-input v-model="configValue.notifyUrl" :autosize="{ minRows: 1, maxRows: 4}" placeholder="支付异步回调地址，通知url必须为直接可访问的url，不能携带参数." type="textarea">
          </el-input>
        </el-form-item>

        <el-form-item label="同步回调地址：">
          <el-input v-model="configValue.returnUrl" :autosize="{ minRows: 1, maxRows: 4}" placeholder="支付成功后页面跳转同步通知页面路径" type="textarea"></el-input>
        </el-form-item>

        <el-divider border-style="dashed" content-position="left">代付配置</el-divider>

        <el-form-item label="记账本ID：">
          <el-input v-model="configValue.accountBookId" placeholder="请输入记账本ID"/>
        </el-form-item>

        <el-form-item label="代付回调地址：">
          <el-input v-model="configValue.withdrawNotifyUrl" :autosize="{ minRows: 1, maxRows: 4}" placeholder="请输入代付异步通知接口" type="textarea"></el-input>
        </el-form-item>

        <el-form-item label="代付备注信息：">
          <el-input v-model="configValue.withdrawRemark" placeholder="请输入代付备注信息"/>
        </el-form-item>


      </template>
    </el-tab-pane>

    <template v-if="configType == 32">
      <!-- 产品配置 -->
      <el-tab-pane label="产品配置" name="ProductConfigs">
        <div class="config-list">
          <el-table :data="productConfigs" fit highlight-current-row>

            <el-table-column align="center" label="是否启用" prop="enabled" width="120">
              <template #default="scope">
                <el-switch v-model="scope.row.enabled" active-text="启用" inactive-text="禁用" inline-prompt/>
              </template>
            </el-table-column>

            <el-table-column align="center" label="产品编码" prop="productCode" width="160">
              <template #default="scope">
                <el-select v-model="scope.row.productCode" placeholder="请输入产品编码" value="">
                  <el-option key="22" value="22" label="支付宝Wap"/>
                  <el-option key="30" value="30" label="微信公众号"/>
                  <el-option key="63" value="63" label="快捷收银台"/>
                </el-select>
              </template>
            </el-table-column>

            <el-table-column align="center" label="图标" prop="iconUrl" width="66">
              <template #default="scope">
                <UploadImage v-model="scope.row.iconUrl" :file-size="10" :show-tip="false" height="36px" width="36px"/>
              </template>
            </el-table-column>

            <el-table-column align="center" label="名称" min-width="160" prop="title">
              <template #default="scope">
                <el-input v-model="scope.row.title" placeholder="支付方式名称"/>
              </template>
            </el-table-column>

            <el-table-column align="center" label="描述" min-width="160" prop="desc">
              <template #default="scope">
                <el-input v-model="scope.row.desc" placeholder="支付方式描述"/>
              </template>
            </el-table-column>

            <el-table-column align="center" label="按钮" min-width="160" prop="buttonName">
              <template #default="scope">
                <el-input v-model="scope.row.buttonName" placeholder="支付方式按钮文本"/>
              </template>
            </el-table-column>

            <el-table-column align="center" fixed="right" label="操作" width="125px">
              <template #default="scope">
                <el-button circle icon="delete" size="small" type="danger" @click="handleRemoveConfig(scope.row)"></el-button>
                <el-button :disabled="scope.$index === 0" circle icon="upload" size="small" type="primary" @click="handleMoveUp(scope.$index)"></el-button>
                <el-button :disabled="scope.$index === productConfigs.length - 1" circle icon="download" size="small" type="success" @click="handleMoveDown(scope.$index)"></el-button>
              </template>
            </el-table-column>
          </el-table>

          <div style="margin-top: 10px">
            <el-button icon="circle-plus" plain type="primary" @click="handleAddConfig">添加</el-button>
          </div>
        </div>
      </el-tab-pane>

      <!-- 授权产品配置 -->
      <el-tab-pane label="授权配置" name="AuthConfigs">
        <el-form-item label="授权地址：">
          <el-input v-model="configValue.payAuthUrl" :autosize="{ minRows: 1, maxRows: 5}" placeholder="请输入授权跳转地址" type="textarea"/>
        </el-form-item>

        <el-divider border-style="dashed" content-position="left">微信公众号配置</el-divider>

        <el-form-item label="公众号AppId：">
          <el-input v-model="configValue.wechatAppId" :autosize="{ minRows: 1, maxRows: 2}" placeholder="请输入微信公众号AppId" type="textarea"/>
        </el-form-item>
        <el-form-item label="公众号密匙：">
          <el-input v-model="configValue.wechatAppSecret" :autosize="{ minRows: 1, maxRows: 2}" placeholder="请输入微信公众号AppSecret" type="textarea"/>
        </el-form-item>

        <el-divider border-style="dashed" content-position="left">支付宝授权配置</el-divider>
        <el-form-item label="商户PID：">
          <el-input v-model="configValue.alipayPid" placeholder="商户签约拿到的pid，如：2088102123816631"/>
        </el-form-item>

        <el-form-item label="应用ID：">
          <el-input v-model="configValue.alipayAppId" placeholder="支付宝分配给开发者的应用ID"/>
        </el-form-item>

        <el-form-item label="加密公匙：">
          <el-input v-model="configValue.alipayPublicKey" :autosize="{ minRows: 2, maxRows: 5}" placeholder="加密的公匙" type="textarea"/>
        </el-form-item>

        <el-form-item label="加密私匙：">
          <el-input v-model="configValue.alipayPrivateKey" :autosize="{ minRows: 2, maxRows: 5}" placeholder="加密私匙" type="textarea"/>
        </el-form-item>

        <el-form-item label="支付宝公匙：">
          <el-input v-model="configValue.alipayGlobalPublicKey" :autosize="{ minRows: 2, maxRows: 5}" placeholder="支付宝公匙 用于异步验证" type="textarea"/>
        </el-form-item>
      </el-tab-pane>

      <!-- 进件入网配置 -->
      <el-tab-pane label="进件入网配置" name="EntryConfigs">

        <el-form-item label="应用ID：">
          <el-input v-model="configValue.entryAppId" placeholder="商户应用ID"/>
        </el-form-item>

        <el-form-item label="商户公钥：">
          <el-input v-model="configValue.entryPublicKey" :autosize="{ minRows: 2, maxRows: 5}" placeholder="商户公钥" type="textarea"/>
        </el-form-item>

        <el-form-item label="商户私钥：">
          <el-input v-model="configValue.entryPrivateKey" :autosize="{ minRows: 2, maxRows: 5}" placeholder="商户私钥" type="textarea"/>
        </el-form-item>

        <el-form-item label="汇付宝公钥：">
          <el-input v-model="configValue.entryHeepayPublicKey" :autosize="{ minRows: 2, maxRows: 5}" placeholder="汇付宝公钥" type="textarea"/>
        </el-form-item>

        <el-form-item label="入网通知地址：">
          <el-input v-model="configValue.entryNotifyUrl" :autosize="{ minRows: 1, maxRows: 4}" placeholder="入网通知地址，通知url必须为直接可访问的url，不能携带参数." type="textarea">
          </el-input>
        </el-form-item>

        <el-form-item label="图片下载路径：">
          <el-input v-model="configValue.entryFilepath" placeholder="图片下载路径"/>
        </el-form-item>
      </el-tab-pane>
    </template>
  </el-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { UploadImage } from '@/components/upload';

defineOptions({name: 'PaymentConfig'})

const props = defineProps({
  configValue: {
    type: Object,
    required: true
  },
  configType: {
    type: Number,
    default: 0,
    required: true
  },
  readonly: {
    type: Boolean,
    default: false
  },
  productConfigs: {
    type: Array,
    default() {
      return []
    }
  }
});

const activeName = ref('MainConfig');

/** 添加配置 */
const handleAddConfig = () => {
  let newData = {
    enabled: false,
    productCode: undefined,
    title: '',
    desc: '',
    iconUrl: '',
    buttonName: ''
  }
  props.productConfigs.push(newData)
};

/** 移除配置 */
const handleRemoveConfig = (item: any) => {
  props.productConfigs.splice(props.productConfigs.indexOf(item), 1);
};

/** 处理上移 */
const handleMoveUp = (index: number) => {
  if (index === 0) {
    return
  }
  handleSwapItems(index, index - 1);
};

/** 处理下移 */
const handleMoveDown = (index: number) => {
  if (index === props.productConfigs.length - 1) {
    return
  }
  handleSwapItems(index, index + 1);
};

/** 处理上下移动逻辑 */
const handleSwapItems = (oldIndex: number, newIndex: number) => {
  props.productConfigs[oldIndex] = props.productConfigs.splice(newIndex, 1, props.productConfigs[oldIndex])[0];
};
</script>

<style lang="scss" scoped>

</style>
